<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 多种样式翻页组件</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .demo-container {
            margin-bottom: 3rem;
            padding: 2rem;
            border: 1px solid #eaeaea;
            border-radius: 8px;
        }
        
        .demo-title {
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #eaeaea;
        }
        
        /* 自定义分页样式 */
        .pagination-custom-1 .page-item.active .page-link {
            background-color: #2563eb;
            border-color: #2563eb;
        }
        
        .pagination-custom-2 .page-item.active .page-link {
            background-color: #10b981;
            border-color: #10b981;
        }
        
        .pagination-custom-3 .page-item.active .page-link {
            background-color: #ef4444;
            border-color: #ef4444;
        }
        
        .pagination-outline .page-link {
            background-color: transparent;
            border: 1px solid #dee2e6;
        }
        
        .pagination-outline .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .pagination-rounded .page-link {
            border-radius: 50% !important;
            margin: 0 2px;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        
        .pagination-lg-custom .page-link {
            padding: 0.75rem 1.5rem;
            font-size: 1.25rem;
        }
        
        .pagination-sm-custom .page-link {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
        
        .pagination-block .page-item {
            display: block;
            width: 100%;
            margin-bottom: 5px;
        }
        
        .pagination-block .page-link {
            width: 100%;
            justify-content: center;
        }
    </style>
</head>
<body class="p-4">
    <div class="container">
        <h1 class="text-center mb-5">Bootstrap 多种样式翻页组件</h1>
        
        <!-- 基础样式分页 -->
        <div class="demo-container">
            <h3 class="demo-title">1. 基础样式分页</h3>
            <nav aria-label="基础分页导航">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 带省略号的分页 -->
        <div class="demo-container">
            <h3 class="demo-title">2. 带省略号的分页</h3>
            <nav aria-label="带省略号的分页导航">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                            <i class="fas fa-angle-left"></i>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item disabled"><span class="page-link">...</span></li>
                    <li class="page-item"><a class="page-link" href="#">8</a></li>
                    <li class="page-item"><a class="page-link" href="#">9</a></li>
                    <li class="page-item"><a class="page-link" href="#">10</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 不同颜色的分页 -->
        <div class="demo-container">
            <h3 class="demo-title">3. 不同颜色的分页</h3>
            <div class="mb-3">
                <p class="text-muted">蓝色主题</p>
                <nav aria-label="蓝色主题分页">
                    <ul class="pagination pagination-custom-1">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
            
            <div class="mb-3">
                <p class="text-muted">绿色主题</p>
                <nav aria-label="绿色主题分页">
                    <ul class="pagination pagination-custom-2">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
            
            <div>
                <p class="text-muted">红色主题</p>
                <nav aria-label="红色主题分页">
                    <ul class="pagination pagination-custom-3">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 轮廓样式分页 -->
        <div class="demo-container">
            <h3 class="demo-title">4. 轮廓样式分页</h3>
            <nav aria-label="轮廓样式分页导航">
                <ul class="pagination pagination-outline">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 圆形分页 -->
        <div class="demo-container">
            <h3 class="demo-title">5. 圆形分页</h3>
            <nav aria-label="圆形分页导航">
                <ul class="pagination pagination-rounded">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 不同大小的分页 -->
        <div class="demo-container">
            <h3 class="demo-title">6. 不同大小的分页</h3>
            <div class="mb-3">
                <p class="text-muted">大型分页</p>
                <nav aria-label="大型分页导航">
                    <ul class="pagination pagination-lg-custom">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
            
            <div>
                <p class="text-muted">小型分页</p>
                <nav aria-label="小型分页导航">
                    <ul class="pagination pagination-sm-custom">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 垂直分页 -->
        <div class="demo-container">
            <h3 class="demo-title">7. 垂直分页（适用于移动端侧边栏）</h3>
            <nav aria-label="垂直分页导航">
                <ul class="pagination pagination-block">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 带页码信息的分页 -->
        <div class="demo-container">
            <h3 class="demo-title">8. 带页码信息的分页</h3>
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted">
                    显示 1-10 条，共 56 条
                </div>
                <nav aria-label="带信息的分页导航">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
                <div>
                    <select class="form-select form-select-sm" style="width: auto;">
                        <option>10条/页</option>
                        <option>20条/页</option>
                        <option>50条/页</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 为分页添加简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            const pageLinks = document.querySelectorAll('.page-link:not(.disabled a)');
            
            pageLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    document.querySelectorAll('.page-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 为当前点击项添加激活状态
                    if(this.parentElement.tagName === 'LI') {
                        this.parentElement.classList.add('active');
                    }
                });
            });
        });
    </script>
</body>
</html>
    